<template>
	<el-form-item :prop="prop" v-bind="$attrs" v-on="$listeners">
		<el-input
			v-if="type === 'input'"
			v-model="formData[prop]"
			v-bind="{ ...inputAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		>
			<template v-for="(inputSlot, index) in slotAttrs.slots">
				<span
					v-if="inputSlot.labelName == 'span'"
					:key="index"
					:slot="inputSlot.name"
					v-on="inputSlot.listen"
				>
					{{ inputSlot.value }}
				</span>
				<el-button
					v-else-if="inputSlot.labelName == 'button'"
					:key="index"
					:slot="inputSlot.name"
					:icon="inputSlot.icon"
					v-on="inputSlot.listen"
				>
					{{ inputSlot.value }}
				</el-button>
			</template>
		</el-input>
		<el-input
			v-else-if="type === 'textarea'"
			v-model="formData[prop]"
			type="textarea"
			v-bind="{ ...inputAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		/>
		<el-select
			v-else-if="type === 'select'"
			v-model="formData[prop]"
			v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		>
			<el-option
				v-for="(item, key) in slotAttrs.options"
				:key="key"
				:label="item[slotAttrs.optionKey ? slotAttrs.optionKey.value : 'value']"
				:value="item[slotAttrs.optionKey ? slotAttrs.optionKey.key : 'key']"
			/>
		</el-select>
		<el-date-picker
			v-else-if="type === 'date'"
			v-model="formData[prop]"
			type="date"
			v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		/>
		<el-date-picker
			v-else-if="type === 'dateTime'"
			v-model="formData[prop]"
			:type="slotAttrs.type || 'datetime'"
			v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		/>
		<el-time-picker
			v-else-if="type === 'time'"
			v-model="formData[prop]"
			v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		/>

		<el-cascader
			v-else-if="type === 'cascader'"
			v-model="formData[prop]"
			v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		/>

		<template v-else-if="type === 'upload'">
			<el-upload
				class="upload-demo"
				action="/api/pc/upload/upload_file"
				:limit="1"
				list-type="picture"
				v-bind="{ ...$attrs, ...slotAttrs }"
				v-on="$listeners"
			>
				<el-button size="small" type="primary"> 点击上传 </el-button>
			</el-upload>
			<div class="upload-hint">
				{{ slotAttrs.hint || '宽高：64px*64px PNG格式透明背景' }}
			</div>
		</template>

		<el-radio-group
			v-else-if="type === 'radio'"
			v-model="formData[prop]"
			v-bind="{ ...$attrs, ...slotAttrs }"
			v-on="$listeners"
		>
			<el-radio
				v-for="(item, key) in slotAttrs.options"
				:key="key"
				:label="item[slotAttrs.optionKey ? slotAttrs.optionKey.key : 'key']"
			>
				<template v-if="slotAttrs.valType === 'img'">
					<img class="defaultimg" :src="item.value" />
				</template>
				<template v-else>
					{{ item[slotAttrs.optionKey ? slotAttrs.optionKey.value : 'value'] }}
				</template>
			</el-radio>
		</el-radio-group>

		<el-button
			v-else-if="type === 'button'"
			v-model="formData[prop]"
			v-bind="{ ...$attrs, ...buttonDefaultAttrs, ...slotAttrs }"
			v-on="$listeners"
		>
			{{ slotAttrs.name }}
		</el-button>
	</el-form-item>
</template>

<script>
	export default {
		name: 'FormItem',
		props: {
			type: {
				// 元素类型
				type: String,
				default: 'input'
			},
			prop: {
				// el-form-item prop
				type: String,
				default: ''
			},
			formData: {
				// form 绑定的数据
				type: Object,
				default: () => ({})
			},
			slotAttrs: {
				// form 绑定的数据
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				inputAttrs: {
					style: { width: '160px' },
					placeholder: '请输入'
				},
				buttonDefaultAttrs: {
					size: 'small',
					type: 'text'
				},
				selectAttrs: {
					style: { width: '160px' },
					placeholder: '请选择'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload-hint {
		color: #c82a29;
	}
	.defaultimg {
		width: 80px;
		height: 80px;
	}
</style>
